<template>
	<view>
		<!-- 假设我需要状态栏到文字内容部分还有20px的距离 -->
		<view class="myNavigation bgc" :style="{height:height+100+'px'}" v-if="select != 2">
			<view class="nav-block">
				<view class="back-block">
					<label class="iconfont icon115fangxiang_xiangzuo"></label>
				</view>
				<view class="select-block">
					<view class="find-man" :class="select==0 ? 'select' : '' ">
						<text @click="findMan">找人</text>
					</view>
					<view class="find-group" :class="select==1 ? 'select' : '' ">
						<text @click="findGroup">找群</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bgc" :style="{'height':height+'px'}" v-if="select == 2">
			
		</view>
		
	</view>
</template>

<script>
	
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	
	export default {
		name: 'Navigation',
		data() {
			return {
				height:0,//获取的状态栏高度
			}
		},
		props:{
			headPic: String,
			select: Number,
		},
		beforeCreate(){
			var _this=this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success:function(data){
					// 将其赋值给this
					_this.height=data.statusBarHeight;
				}
			})
		},
		methods: {
			// 找人
			findMan(){
				this.$emit('findMan')
			},
			// 找群
			findGroup(){
				this.$emit('findGroup')
			}
		},
		components: {
			uniNavBar
		}
	}
</script>

<style>
	/* .status_bar {
		background-color: #007AFF;
	} */
	.myNavigation {
		/* background-color: #10d4ff; */
		display: flex;
		flex-direction: row;
	/* 	justify-content: space-between; */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 30rpx;
		z-index: 10;
	}
	.nav-block{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: absolute;
		bottom: 10rpx;
	}
	.back-block{
		flex: 4;
	}
	.select-block{
		flex: 9;
		display: flex;
		flex-direction: row;
		font-size: 14px;
		text-align: center;
		line-height: 50rpx;
	}
	
	.find-man{
		height: 50rpx;
		width: 100rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		border: 1px solid #FFFFFF;
	
	}
	
	.find-group{
		height: 50rpx;
		width: 100rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border: 1px solid #FFFFFF;
	}
	
	.select {
		background-color: #FFFFFF;
	}
</style>
